import {
  getBopInfoByPage,
  addBopInfo,
  updateBopInfo,
  delBopInfo,
  exportBopInfo,
} from '@/services/baseData/bopInfo';
import { PlusOutlined, ArrowLeftOutlined } from '@ant-design/icons';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import type { ActionType, ProColumns } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import { Button, Form, Input, message, Modal, Tree } from 'antd';
import { sortTran, filterTran, filterTranNew } from '@/utils/requestUtil';
import React, { useEffect, useRef, useState } from 'react';
import { history } from 'umi';
import dayjs from '@/components/dayjs';
import { Ellipsis } from '@/components/Ellipsis';
const BopInfo: React.FC<{}> = (props) => {
  const actionRef = useRef<ActionType>();
  const [modalVisit, setModalVisit] = useState(false); // 新建和编辑提示框
  const [confirmLoading, setConfirmLoading] = useState(false); //编辑框的disable
  const [formTitle, setFormTitle] = useState('新建'); //
  const [createOrUpdate, setCreateOrUpdate] = useState(false); //编辑框的disable
  const [form] = Form.useForm();
  const ref = useRef(null);
  const dateFormat = 'YYYY-MM-DD';
  const current_bopcode = props.bopcode;
  const columns: ProColumns[] = [
    // {
    //   title: '序号',
    //   dataIndex: 'index',
    //   valueType: 'index',
    //   width: 80,
    // },
    {
      title: '工序顺序',
      dataIndex: 'sequence',
      width: 90,
      align: 'center',
      sorter: true,
    },
    {
      title: '工序编号',
      dataIndex: 'processCode',
      width: 140,
      align: 'center',
      sorter: true,
    },
    {
      title: '工序名称',
      dataIndex: 'processName',
      width: 200,
      align: 'center',
      sorter: true,

      render: (text) => <>{Ellipsis(text)}</>,
    },
    {
      title: '是否生产工序',
      dataIndex: 'isProductionProcess',
      width: 140,
      align: 'center',
      sorter: true,
      render: (text, record, _, action) => {
        return <div>{record.isProductionProcess == 1 ? '是' : '否'}</div>;
      },
    },
    {
      title: '是否需要自检',
      dataIndex: 'showSelfInspection',
      search: false,
      align: 'center',
      sorter: true,
      width: 140,
      render: (text, record, _, action) => {
        return <div>{record.showSelfInspection == 1 ? '是' : '否'}</div>;
      },
    },
    // {
    //   title: '备注',
    //   dataIndex: 'memo',
    // },
    // {
    //   title: '创建人', //表头显示的名称
    //   search: false,
    //   dataIndex: 'createName',
    // },
    // {
    //   title: '创建日期', //表头显示的名称
    //   search: false,
    //   dataIndex: 'createTime',
    //   render: (text, record, _, action) => {
    //     return (
    //          dayjs(record.createTime).format(dateFormat)
    //     );
    //   },
    // },
  ];

  const handleSubmit = async () => {
    setConfirmLoading(true);
    if (formTitle == '新建') {
      const result = await addBopInfo(form.getFieldsValue());
      if (result != null) {
        message.success('添加成功');
      }
    } else {
      await updateBopInfo(form.getFieldsValue());
    }
    setConfirmLoading(false);
    setModalVisit(false);
    actionRef.current!.reload();
  };

  return (
    <PageHeaderWrapper title={false} breadcrumb={undefined}>
      <ProTable
        headerTitle="工艺路径序列"
        actionRef={actionRef} //用于触发刷新操作等，看api
        rowKey="id" //表格行 key 的取值，可以是字符串或一个函数
        formRef={ref}
        search={false}
        // toolBarRender={(action, { selectedRows }) => [
        //   <Button
        //     key="button"
        //     icon={<ArrowLeftOutlined />}
        //     onClick={() => {
        //       history.push('/systemSetting/basicData/bopTotal');
        //     }}
        //     type="primary"
        //   >
        //     返回
        //   </Button>,
        // ]}
        request={async (params = {}, sort, filter) => {
          const res = { ...params, bopCode: current_bopcode };
          const sorters = sortTran(sort);
          const filters = filterTranNew(res);
          const result = await getBopInfoByPage({ ...params, sorters: sorters, filters: filters });
          return {
            data: result.data.content,
            total: result.data.totalElements,
            success: result.success,
          };
        }}
        columns={columns}
        scroll={{ x: 570, y: 350 }}
        rowSelection={{}}
      />
      <Modal
        title={formTitle}
        visible={modalVisit}
        onOk={handleSubmit}
        confirmLoading={confirmLoading}
        onCancel={() => setModalVisit(false)}
      >
        <Form
          name="wrap"
          labelCol={{ flex: '110px' }}
          labelAlign="left"
          labelWrap
          form={form}
          wrapperCol={{ flex: 1 }}
          colon={false}
        >
          <Form.Item label="id" name="id" hidden={true}>
            <Input />
          </Form.Item>
          <Form.Item
            label="工艺路径ID"
            name="bopCode"
            rules={[{ required: true, message: '请输入工艺路径ID!' }]}
          >
            <Input disabled={createOrUpdate} />
          </Form.Item>
          <Form.Item
            label="工序编号"
            name="processCode"
            rules={[{ required: true, message: '请输入工序编号!' }]}
          >
            <Input disabled={createOrUpdate} />
          </Form.Item>
          <Form.Item
            label="工序名称"
            name="processName"
            rules={[{ required: true, message: '请输入工序名称!' }]}
          >
            <Input disabled={createOrUpdate} />
          </Form.Item>
          <Form.Item
            label="工序序列"
            name="sequence"
            rules={[{ required: true, message: '请选择工序序列!' }]}
          >
            <Input disabled={createOrUpdate} />
          </Form.Item>
          <Form.Item
            label="工艺路径名称"
            name="bopName"
            rules={[{ required: true, message: '请输入工艺路径名称!' }]}
          >
            <Input disabled={createOrUpdate} />
          </Form.Item>
          <Form.Item label="备注" name="memo">
            <Input disabled={createOrUpdate} />
          </Form.Item>
        </Form>
      </Modal>
    </PageHeaderWrapper>
  );
};
export default BopInfo;
